<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/8/9
  Time: 14:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>嗨购-购物车</title>
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/static/img/higou.png" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/car.css" />
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
</head>

<body onload="jisuanjine()">
<div>
    <div id="top">
        <div id="top_1">
            <div id="top_1_left">
                <p>欢迎您,${sessionScope.user.u_name}</p>
                <a href="${pageContext.request.contextPath}/exit.jsp" id="exit">[退出]</a>
                <p class="shu">|</p>
                <a href="${pageContext.request.contextPath}/UserInfoServlet.do" id="refer">订单查询</a>
            </div>
        </div>
        <div id="logo">
            <a target="_blank" href="${pageContext.request.contextPath}/index.jsp"><img src="${pageContext.request.contextPath}/static/img/higou.png" /></a>
            <div id="dianhu">
                <p class="lianxifangshi">&nbsp;&nbsp;&nbsp;&nbsp;400-820-8820</p>
                <p class="gongzuoshijian">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;8:00-22:00</p>
            </div>
        </div>
    </div>
    <div id="top_line"></div>
    <div id="hiht">
        <div id="diaojishi">
            <img src="${pageContext.request.contextPath}/static/img/shalou.png" class="shalou" />
            <p>请在 </p>
            <p class="shijian" id="shijian" >19分34秒</p>
            <p> 内去结账,并在下单后20分钟内完成支付</p>
        </div>
        <div id="tiaojian">
            <img src="${pageContext.request.contextPath}/static/img/zhen.png" />
            <p>真品防伪码</p>
            <img src="${pageContext.request.contextPath}/static/img/30.png" />
            <p>30天无条件退货</p>
            <img src="${pageContext.request.contextPath}/static/img/wuliu.png" />
            <p>美妆满2件或299元包邮</p>
            <!--<button type="submit" class="btn btn-danger">去结算</button>-->
        </div>
        <div id="mianyou">
            <img src="${pageContext.request.contextPath}/static/img/mianyou.png" />
            <p>新用户首单满39元包邮,第三方入驻商家单订单满159包邮</p>
        </div>
    </div>
    <div id="centre">
        <div id="centre_shuxing">
            <div id="shuxing_cbox">
                <p>名品特卖</p>
            </div>
            <div class="shuxing_biaotou">
                <p>嗨购价(元)</p>
                <p>数量</p>
                <p>小计(元)</p>
                <p>操作</p>
            </div>
        </div>
        <c:forEach var="item" items="${sessionScope.carList}">
        <div class="centre_shangpin"  id="${item.g_id}">
            <div class="shangpin_shuxin">
                <input type="checkbox" name="newsletter" onclick="checkOne()" value="${item.g_id}"/>
                <img src="${pageContext.request.contextPath}/static/img/goods/${item.g_img}.jpg" />
                <a href="${pageContext.request.contextPath}/ShowGoodServlet.do?g_id=${item.g_id}">${item.g_info}</a>
            </div>
            <div class="shuangpin_yuansu">
                <div class="jg">
                    <!--
                            	d_1 其中 1 就是将来显示商品对应的主键值
                            	d_${item.u_id}

                            	${item.u_price*0.8}
                            -->
                    <div id="d_${item.g_id}" style="width: 40px">${item.g_now*item.e_dis}</div>
                    <!-- 198 使用 ${item.u_price} -->
                    <div class="yuanji">${item.g_now}</div>
                </div>
                <div class="jiajian"><input type="button" style=" border-right:0px;" onClick="disNum(this,${item.g_id})" value="-"><input type="text" readonly="readonly" value="${item.num}" id="t_${item.g_id}" class="wenben"  name="goumaishuliang" /><input type="button" value="+" style="border-left:0px;" onClick="incNum(this,${item.g_id})">
                </div>
                <!--%{item.u_price*0.8*item.count} -->
                <div class="jine" id="jine_${item.g_id}">${item.g_now*item.e_dis*item.num}</div>
                <a href="javascript:deleteProduct('${item.g_id}')"><img src="${pageContext.request.contextPath}/static/img/shanchu.png" /></a>
            </div>
        </div>
        </c:forEach>

        <div class="centre_je">
            <p class="shangpingjine">商品金额:</p>
            <p class="je_shuzi" id="je_shuzi">¥</p>
        </div>
    </div>
    <div class="jiesuan">
        <div class="quanxuan">
            <input type="checkbox" name="qx" class="qx" onclick="checkCHALL(this.checked)" />
            <p>全选</p>
        </div>
        <div class="dizhi">请选择收货地址:
            <select id="sele" style="width: 130px">
                <c:forEach var="address" items="${sessionScope.addressList}">
                    <option value="${address.a_id}">${address.a_add}---${address.a_name}</option>
                </c:forEach>
            </select>
            <div class="qingkong">
                <input type="button" name="qk" class="qk" value="清空购物车" onclick="deleteAll()" />
            </div>
        </div>

        <div class="yijian">
            <p>共</p>
            <p class="sz" id="zongshu">0</p>
            <p>件商品</p>
        </div>
        <div class="yinfu" id="yinfu">
            <span>应付金额:</span>
            ¥ <p class="sz_68" id="sz_68">0</p>
        </div>
        <div class="qujiesuan">
            <a href="javascript:jiesuan()">去结算</a>
        </div>
    </div>
    </form>
</div>
<div id="weiziji">
    <img src="${pageContext.request.contextPath}/static/img/weiziji.jpg" />
</div>
</body>
<script type="text/javascript">
    function dateChange() {
        $.ajax({
            url:"${pageContext.request.contextPath}/ChangeTimeServlet.do",
            type:"post",
            dataType:"json",
            success:function (data) {
                document.getElementById("shijian").innerHTML=data.mm+"分"+data.ss+"秒";
                if (data.mm=='0' && data.ss=='0'){
                    location.reload();
                }
            }
        })
    }
    setInterval("dateChange()",1000);
    function jiesuan() {
        var money=document.getElementById("yinfu").innerHTML;
        if (parseFloat(money)<=0){
            alert("请选择商品");
        } else {
            var chs=document.getElementsByName("newsletter");
            var gids=new Array();
            for(var i=0;i<chs.length;i++)
            {
                var ch=chs[i];
                if(ch.checked)
                {
                    var n=ch.value;

                        gids[i]=n;

                }
            }
            var sele=document.getElementById("sele").value;
            var nums=document.getElementById("zongshu").innerHTML;
            var price=document.getElementById("sz_68").innerHTML;

            if (nums>0 && price>0){
                location.href="${pageContext.request.contextPath}/MoneyServlet.do?sele="+sele+"&gids="+gids+"&nums="+nums+"&price="+price;
            }else {
                alert("请选择购买商品!");
            }
        }
    }
    function checkOne()
    {
        var chs=document.getElementsByName("newsletter");
        var shuliangs = document.getElementsByName("goumaishuliang");
        var total=0;
        var shuliang=0;
        for(var i=0;i<chs.length;i++)
        {
            var ch=chs[i];
            if(ch.checked)
            {
                var n=ch.value;
                var jine=document.getElementById("jine_"+n).innerHTML;
                total+=parseFloat(jine);
                //计算数量
                shuliang += parseInt(shuliangs[i].value);
            }
        }
        document.getElementById("sz_68").innerHTML=parseFloat(total.toFixed(2));

        document.getElementById("zongshu").innerHTML = shuliang;
    }
    function checkCHALL(e) {
        var all = document.getElementsByName("newsletter");
        for(var i in all) {
            all[i].checked = e;
        }
        var chs=document.getElementsByName("newsletter");
        var shuliangs = document.getElementsByName("goumaishuliang");
        var total=0;
        var shuliang=0;
        for(var i=0;i<chs.length;i++)
        {
            var ch=chs[i];
            if(ch.checked)
            {
                var n=ch.value;
                var jine=document.getElementById("jine_"+n).innerHTML;
                total+=parseFloat(jine);
                //计算数量
                shuliang += parseInt(shuliangs[i].value);
            }
        }
        document.getElementById("sz_68").innerHTML=parseFloat(total.toFixed(2));

        document.getElementById("zongshu").innerHTML = shuliang;
    }

    function disNum(dom, n) {
        var disNum = dom.nextSibling.value;
        if (disNum==2){
            $.ajax({
                url:"${pageContext.request.contextPath}/ChangeNumServlet.do",
                data:{"g_id":n,"num":-1,"disNum":disNum},
                type:"post",
                dataType:"json",
                success:function (data) {
                    alert(data.infos);
                }
            });
            disNum--;
        }

        if(disNum < 2) {
            disNum= 1;
        } else {
            disNum--;
        }
        dom.nextSibling.value=disNum;
        var price = document.getElementById("d_" + n).innerHTML;
        var m=Math.round(price * disNum*100)/100;
        document.getElementById("jine_" + n).innerHTML = m;
        //设置总的金额
        jisuanjine();
        checkOne();

            $.ajax({
                url:"${pageContext.request.contextPath}/ChangeNumServlet.do",
                data:{"g_id":n,"num":-1,"disNum":disNum},
                type:"post",
                dataType:"json",
                success:function (data) {
                    alert(data.infos);
                }
            });
    }

    function jisuanjine() {
        var jines = document.getElementsByTagName("div");
        var jine = 0;
        for(var i = 0; i < jines.length; i++) {
            var d = jines[i];
            if(d.id.startsWith("jine_")) {
                jine += parseFloat(d.innerHTML);
            }
        }
        document.getElementById("je_shuzi").innerHTML = "￥" + parseFloat(jine.toFixed(2));

    }


    function incNum(dom, n) {
        var incNum=dom.previousSibling.value;

        if (incNum==9){
            $.ajax({
                url:"${pageContext.request.contextPath}/ChangeNumServlet.do",
                data:{"g_id":n,"num":1,"disNum":incNum},
                type:"post",
                dataType:"json",
                success:function (data) {
                  <%--  alert(data.infos);--%>
                }
            });
            incNum++;
        }

        if(incNum >9) {
            incNum=10;
        } else {
            incNum++;
        }
        dom.previousSibling.value=incNum;
        // incNum=dom.previousSibling.value;
        var price = document.getElementById("d_" + n).innerHTML;
        var m=Math.round(price * incNum*100)/100;
        document.getElementById("jine_" + n).innerHTML = m;
        jisuanjine();
        checkOne();
        $.ajax({
            url:"${pageContext.request.contextPath}/ChangeNumServlet.do",
            data:{"g_id":n,"num":1,"disNum":incNum},
            type:"post",
            dataType:"json",
            success:function (data) {
                alert(data.infos);
            }
        });


    }

    function deleteProduct(elementId) {
        var delElement = document.getElementById(elementId); //删除元素的id
        var flag = confirm("你确定要删除此商品吗？");
        if(flag == true) {
            delElement.parentNode.removeChild(delElement);
            jisuanjine();
            $.ajax({
                url:"${pageContext.request.contextPath}/DelOneServlet.do",
                data:{"g_id":elementId},
                type:"post",
                dataType:"json"
            });
        }
    }
    function deleteAll() {
        var flag = confirm("你确定要清空购物车吗？");
        if(flag == true) {
           location.href="${pageContext.request.contextPath}/DelCarServlet.do";
        }
    }

</script>

</html>